<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
  <style>
    .panel {
      width: 900px;
      margin: 10px auto;
    }

    .table img {
      width: 40px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <!-- Default panel contents -->
      <div class="panel-heading">英雄列表管理</div>
      <div class="panel-body">
        <!-- 存放的搜索区域 -->
        <form action="" autocomplete="off">
          <div class="row">
            <div class="col-lg-3">
              <input type="text" class="form-control" placeholder="输入英雄名称" name="name" />
            </div>
            <div class="col-lg-3">
              <select class="form-control" name="gender">
                <option value="">--选择性别--</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="col-lg-3">
              <input name="age" type="text" class="form-control" placeholder="输入年龄" />
            </div>
            <div class="col-lg-3">
              <button type="button" class="btn btn-success" id="search">
                搜索
              </button>
              <button type="button" class="btn btn-warning" id="reset">
                重置
              </button>
            </div>
          </div>
        </form>
      </div>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>编号</th>
            <th>英雄名称</th>
            <th>英雄性别</th>
            <th>年龄</th>
            <th>操作区</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <tr>
            <td>1</td>
            <td>大乔</td>
            <td>女</td>
            <td>18</td>
            <td>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script>
    const list = [
      { id: 0, name: "大乔", gender: "男", age: 18 },
      { id: 1, name: "小乔", gender: "女", age: 20 },
      { id: 2, name: "鲁班", gender: "男", age: 48 },
      { id: 2, name: "后羿", gender: "女", age: 28 },
    ]

    // 1、渲染数据
    let tbody = document.querySelector('#tbody')
    function render(arr) {
      const res = arr.map((item, index) => `<tr>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.gender}</td>
            <td>${item.age}</td>
            <td>
              <button data-index="${index}" type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
      `)
      tbody.innerHTML = res.join('')
    }
    render(list)

    // 2、根据条件进行搜索
    let search = document.querySelector('#search')
    search.addEventListener('click', function () {
      let name = document.querySelector('input[name=name]').value.trim()
      let gender = document.querySelector('select[name=gender]').value.trim()
      let age = document.querySelector('input[name=age]').value.trim()
      // 声明一个数组arr得到所有的英雄数据
      let arr = list
      // 如果有name，就按照name进行筛选
      if (name) {
        arr = arr.filter(item => item.name === name)
      }
      // 如果有gender，就按照gender进行筛选
      if (gender) {
        arr = arr.filter(item => item.gender === gender)
      }
      // 如果有age，就按照age进行筛选
      if (age) {
        arr = arr.filter(item => item.age === +age)
      }

      // 将筛选好的 arr 进行渲染
      render(arr)
    })














      // const tbody = document.querySelector("tbody");
      // const searchBtn = document.querySelector("#search");
      // const resetBtn = document.querySelector("#reset");
      // const nameDom = document.querySelector("[name='name']");
      // const genderDom = document.querySelector("[name='gender']");
      // const ageDom = document.querySelector("[name='age']");

      // function render(list) {
      //   let html = "";
      //   list.forEach(
      //     (v, i) =>
      //       (html += `
      //   <tr>
      //         <td>${i + 1}</td>
      //         <td>${v.name}</td>
      //         <td>${v.gender}</td>
      //         <td>${v.age}</td>
      //         <td>
      //           <button type="button" class="btn btn-danger delete-btn" data-index="${i}" >删除</button>
      //         </td>
      //       </tr>
      //   `)
      //   );
      //   tbody.innerHTML = html;
      // }
      // render(list);
      // searchBtn.addEventListener("click", function () {
      //   const name = nameDom.value.trim();
      //   const gender = genderDom.value.trim();
      //   const age = ageDom.value.trim();
      //   const newList = list.filter((v) => {
      //     const validName = name === "" || name === v.name;
      //     const validGender = gender === "" || gender === v.gender;
      //     const validAge = age === "" || +age === v.age;
      //     return validName && validGender && validAge;
      //   });
      //   render(newList);
      // });
      // resetBtn.addEventListener("click", function () {
      //   nameDom.value = "";
      //   genderDom.value = "";
      //   ageDom.value = "";
      //   render(list);
      // });

      // tbody.addEventListener("click", function (ev) {
      //   if (!confirm("您确定删除吗")) return;
      //   const target = ev.target;
      //   if (target.classList.contains("delete-btn")) {
      //     const { index } = target.dataset;
      //     list.splice(index, 1);
      //     render(list);
      //   }
      // });
  </script>
</body>

</html>